<template>
    <div class="main-body">
        <el-carousel :interval="4000" type="card" height="260px">
            <el-carousel-item v-for="(carousel, index) in carousels" :key="index">
                <img class="carousel-item-img" :src="carousel.imgPath">
            </el-carousel-item>
        </el-carousel>
        <div class="main-body-remain">
            <el-row>
                <el-col class="remain-left" :span="18">
                    <div class="remain-left-header">
                        <img class="remain-left-header-img" src="../../assets/img/shop/cat-header3.png">
                        猫咪种类
                        <div class="remain-left-header-divider"></div>
                    </div>
                    <div class="remain-left-body">
                        <div class="left-body-row" v-for="(list, index) in catCategoryList" :key="index">
                            <div class="left-body-col" v-for="kind in list" :key="kind.cateName">
                                <div style="text-align: center;" @click="handlePathChange(kind.path)">
                                    <img class="remain-left-body-img" :src="kind.imgPath">
                                    <div class="remain-left-body-text">{{ kind.cateName }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="remain-right">
                        <div class="remain-right-header">
                            猫力榜
                            <i class="remain-header-icon iconfont cat-icon-chongwutubiao15"></i>
                        </div>
                        <div class="remain-right-body">
                            <div class="right-body-item" v-for="(rank, index) in catRankList" :key="index">
                                <div class="item-header">
                                    <i class="item-header-icon iconfont cat-icon-chongwutubiao18"></i>
                                    TOP.{{ index + 1}}
                                </div>
                                <div class="item-detail" @click="handlePathChange(rank.path)">
                                    <img class="item-detail-img" :src="rank.catImg">
                                    <div>
                                        <div style="margin-bottom: 4px; margin-top: 2px">{{ rank.catName }}</div> 
                                        <div style="font-size: 12px; color: #7f8fa6">
                                            {{ rank.detail }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            carousels: [
                {
                    imgPath: require('../../assets/img/shop/cat-carousel1.png')
                },
                {
                    imgPath: require('../../assets/img/shop/cat-carousel2.png')
                },
                {
                    imgPath: require('../../assets/img/shop/cat-carousel3.png')
                },
                {
                    imgPath: require('../../assets/img/shop/cat-carousel4.png')
                }
            ],
            catCategoryList: [
                [
                    {
                        imgPath: require('../../assets/img/shop/cat-kind1.jpg'),
                        cateName: '布偶猫',
                        path: 'buou'
                    },
                    {
                        imgPath: require('../../assets/img/shop/cat-kind2.jpg'),
                        cateName: '德文卷毛猫',
                        path: 'dewen'
                    },
                    {
                        imgPath: require('../../assets/img/shop/cat-kind3.jpg'),
                        cateName: '矮脚曼基康',
                        path: 'aijiao'
                    },
                    {
                        imgPath: require('../../assets/img/shop/cat-kind4.jpg'),
                        cateName: '波斯猫',
                        path: 'bosi'
                    },
                    {
                        imgPath: require('../../assets/img/shop/cat-kind5.jpg'),
                        cateName: '美国短毛猫',
                        path: 'meiduan'
                    }
                ],
                [
                    {
                        imgPath: require('../../assets/img/shop/cat-kind6.jpg'),
                        cateName: '英国短毛猫',
                        path: 'yingduan'
                    },
                    {
                        imgPath: require('../../assets/img/shop/cat-kind7.jpg'),
                        cateName: '金吉拉',
                        path: 'jinjila'
                    },
                    {
                        imgPath: require('../../assets/img/shop/cat-kind8.jpg'),
                        cateName: '加菲猫',
                        path: 'jiafei'
                    },
                    {
                        imgPath: require('../../assets/img/shop/cat-kind9.jpg'),
                        cateName: '金渐层',
                        path: 'jinjianceng'
                    },
                    {
                        imgPath: require('../../assets/img/shop/cat-kind10.jpg'),
                        cateName: '银渐层',
                        path: 'yinjianceng'
                    }
                ],
                [
                    {
                        imgPath: require('../../assets/img/shop/cat-kind11.jpg'),
                        cateName: '暹罗猫',
                        path: 'xianluo'
                    },
                    {
                        imgPath: require('../../assets/img/shop/cat-kind12.jpg'),
                        cateName: '缅因猫',
                        path: 'mianyin'
                    },
                    {
                        imgPath: require('../../assets/img/shop/cat-kind13.jpg'),
                        cateName: '孟加拉豹猫',
                        path: 'mengjiala'
                    },
                    {
                        imgPath: require('../../assets/img/shop/cat-kind14.jpg'),
                        cateName: '俄罗斯蓝猫',
                        path: 'elan'
                    },
                    {
                        imgPath: require('../../assets/img/shop/cat-kind15.jpg'),
                        cateName: '黑白柯尼斯卷毛猫',
                        path: 'kenisi'
                    }
                ]
            ],
            catRankList: [
                {
                    catImg: require('../../assets/img/shop/cat-rank1.jpg'),
                    catName: '波斯猫',
                    detail: '有“猫中王子”、“王妃”之称',
                    path: 'bosi'
                },
                {
                    catImg: require('../../assets/img/shop/cat-rank2.jpg'),
                    catName: '布偶猫',
                    detail: '温顺好静，对人友善',
                    path: 'buou'
                },
                {
                    catImg: require('../../assets/img/shop/cat-rank3.jpg'),
                    catName: '美国短毛猫',
                    detail: '以生性聪明，温顺而著称',
                    path: 'meiduan'
                }
            ]
        }
    },
    methods: {
        handlePathChange(path) {
            this.$router.replace('/shop/store/'+ path);
        }
    },
    beforeMount() {
        this.$store.dispatch('changeShopBreadcrumb', [{ name: '首页' }]);
    }
}
</script>

<style lang="less">
    @import url('../../assets/less/common.less');

    .main-body {
        margin-top: 20px;
        .el-carousel {
            padding: 0 50px 0 50px;
            margin-right: 40px;
            .el-carousel__item {
                display: flex;
                justify-content: center;
                 .carousel-item-img {
                    width: 80%;
                    border-radius: 10px;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
                }
            }
        }
        .main-body-remain {
            margin: 20px 35px 0 10px;
            .remain-left {
                .remain-left-header {
                    font-family: "catfont";
                    font-size: 28px;
                    margin-left: 50px;
                    line-height: 35px;
                    .remain-left-header-img {
                        width: 32px;
                        margin-bottom: -20px;
                        margin-left: -8px;
                        margin-right: 2px;
                    }
                    .remain-left-header-divider {
                        width: 56%;
                        border-top: 3px solid @theme-color;
                    }
                }
                .remain-left-body {
                    margin-right: 55px;
                    padding-top: 5px;
                    .left-body-row {
                        display: flex;
                        justify-content: space-around;
                        margin-top: 15px;
                        .left-body-col {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            font-size: 14px;
                            font-weight: 300;
                            width: 112px;
                            .remain-left-body-img {
                                width: 60px;
                                border-radius: 35px;
                                border: 4px solid rgb(241, 234, 234);
                                margin-bottom: 4px;
                            }
                            .remain-left-body-text {
                                border-bottom: 1px solid #fff;
                            }
                            &:hover {
                                cursor: pointer;
                                .remain-left-body-text {
                                    border-bottom: 1px dotted @theme-color;
                                    color: @theme-color;
                                }
                            }
                        }
                    }
                }
            }
            .remain-right {
                width: 85%;
                height: 360px;
                background-color: @backgroud-color;
                border-radius: 5px;
                .remain-right-header {
                    margin-left: 20px;
                    position: relative;
                    top: -17px;
                    font-family: 'catfont';
                    font-size: 26px;
                    .remain-header-icon {
                        color: @theme-color;
                        font-size: 30px;
                        margin-left: -10px;
                        position: relative;
                        top: -6px;
                    }
                }
                .remain-right-body {
                    margin-left: 15px;
                    .right-body-item {
                        margin-top: 30px;
                        .item-header {
                            color: @theme-color;
                            font-size: 16px;
                            margin-bottom: 10px;
                            .item-header-icon {
                                font-size: 18px;
                            }
                        }
                        .item-detail {
                            display: flex;
                            margin-left: 6px;
                            margin-top: 5px;
                            .item-detail-img {
                                width: 50px;
                                border-radius: 25px;
                                margin-right: 8px;
                            }
                            &:hover {
                                color: @theme-color;
                                cursor: pointer;
                            }
                        }
                    }
                    .right-body-item:first-child {
                        margin-top: 0;
                    }
                }
            }
        }
    }
</style>